<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <script src="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/highcharts.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/exporting.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/series-label.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/oldie.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/highcharts-zh_CN.js"></script>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>充电桩运行监控</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>充电溯源</strong>' +
            '</li>' +
            '</ol>';
    });
</script>

<style>

    .pace-done, body {
        background-color: #ffffff;
    }

</style>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight"  style="background-color: #ffffff">
    <div class="col-sm-12">
        <div class="ibox" style="width: 8rem; margin: 0 auto">
            <div class="ibox-body">
                <div class="row">
                    <div class="pull-left search col-md-3 nopadding">
                        <input id="stationNo" type="text" class="form-control" style="width: 100% !important;"
                               placeholder="站点名称/编号">
                    </div>

                    <div class="pull-left search col-md-3">
                        <input id="operatorName" type="text" class="form-control" style="width: 100% !important;"
                               placeholder="加盟商名称">
                    </div>

                    <div class="pull-left search col-md-3 nopadding">
                        <input id="pileNo" type="text" class="form-control" style="width: 100% !important;"
                               placeholder="充电枪编号">
                    </div>

                </div>
            </div>
            <div class="ibox-body">
                <div class="row">
                <div class="pull-left search ol-md-1 col-md-3">
                    <input id="beginTime" name="beginTime" type="text"
                           class="form-control layer-date input-distance shortInput" autocomplete="false"
                           placeholder="开始时间">
                </div>
                <div class="pull-left search ol-md-1 col-md-3">
                    <input id="endTime" name="endTime" type="text"
                           class="form-control layer-date input-distance shortInput" autocomplete="false"
                           placeholder="结束时间">
                </div>

                <div class="pull-left search col-md-2">
                    <button class="btn btn-success" onclick=getOrdertjistics()>
                        <i class="fa fa-search" aria-hidden="true"></i>查询
                    </button>
                </div>
            </div>
            </div>
        </div>
    </div>
    <table id="exampleTable" data-mobile-responsive="true">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="container" style="max-width: 8rem; height: 500px;  margin: 0 auto; overflow: hidden; margin-top: 50px" data-highcharts-chart="0">
        </div>

    </table>
</div>

<script>
    function getOrdertjistics() {
        var operatorName = $('.row').find("#operatorName").val();
        var stationNo =$('.row').find("#stationNo").val();
        var pileNo = $('.row').find("#pileNo").val();
        var beginTime = $('.row').find("#beginTime").val();
        var endTime = $('.row').find("#endTime").val();
        var isdata= [];
        var totalPower= [];
        var url="${ctx}/tenantChargeLog/orderTrace/?operatorName="+operatorName+"&stationNo="+stationNo+"&pileNo="+pileNo+"&beginTime="+beginTime+"&endTime="+endTime;
        console.log(url)
        $.ajax({
            "type": "get",
            "url": url,
            "data": {},
            "success": function (data) {
                console.log(data)
                if(data.status==200){
                    for (var i = 0; i < data.data.length; i++) {
                        isdata.push(data.data[i].orderHour+"/h");
                        totalPower.push(data.data[i].totalPower);
                    }
                    ShowOrdertj(isdata,totalPower);
                }else{
                    layer.msg(data.message);
                }

            }
        })
    }
    function getInitOrdertjistics() {
        var operatorName = $('.row').find("#operatorName").val();
        var stationNo =$('.row').find("#stationNo").val();
        var pileNo = $('.row').find("#pileNo").val();
        var beginTime = $('.row').find("#beginTime").val();
        var endTime = $('.row').find("#endTime").val();
        if(null == beginTime || '' == beginTime){
            //beginTime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").parse("2020-00-01 00:00:00");
            //beginTime = new Date('2016-12-02 22:58:58');
            beginTime = '2020-01-01%2000:00:00';
        }
        var isdata= [];
        var totalPower= [];
        var url="${ctx}/tenantChargeLog/orderTrace/?operatorName="+operatorName+"&stationNo="+stationNo+"&pileNo="+pileNo+"&beginTime="+beginTime+"&endTime="+endTime;
        $.ajax({
            "type": "get",
            "url": url,
            "data": {},
            "success": function (data) {
                //console.log(data)
                if(data.status==200){
                    for (var i = 0; i < data.data.length; i++) {
                        isdata.push(data.data[i].orderHour+"/h");
                        totalPower.push(data.data[i].totalPower);
                    }
                    ShowOrdertj(isdata,totalPower);
                }else{
                    layer.msg(data.message);
                }

            }
        })
    }

    function ShowOrdertj(isdata,totalPower) {
        var chart = Highcharts.chart('container', {
            title: {
                text: ''
            },
            subtitle: {
                text: '站点统计'
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            credits: {
                text: '瑞晨充电',
                href: '/'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            xAxis: {
                categories: isdata
            },

            series: [ {
                name: '充电量',
                data: totalPower
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 700
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    }
    getInitOrdertjistics();


    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        var beginTime = laydate.render({
            elem: '#beginTime', //指定元素
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            position:'fixed',
            change: function (value, date) {

                console.log(date)
                startDate.config.max = {
                    year: date.year,
                    month: date.month - 1,//关键
                    date: date.date,
                    hours: date.hours,
                    minutes: date.minutes,
                    seconds: date.seconds
                }
            }
        });
        var endTime = laydate.render({
            elem: '#endTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            position:'fixed',
            change: function (value, date) {
                endDate.config.min = {
                    year: date.year,
                    month: date.month - 1, //关键
                    date: date.date,
                    hours: date.hours,
                    minutes: date.minutes,
                    seconds: date.seconds
                };
            }
        });

    })

</script>

</body>
</html>